<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {

        text-align: center;
        color: #808080;
    }

    /* .c-gray {
color: #ccc;
}

.c-green {
color: #16a840;
}

.c-red {
color: #dd4f43;
} */

    a {
        text-decoration: none;
        color: skyblue;

    }

    /* .layui-footer{
background-color: #23262e;
} */
    .tdo {
        background-color: #e0dcdc;
    }
</style>

<body>
    <div style="padding: 15px;background-color: #f1f3f4;">
        <h1 style="text-align: center;color: gray;">文章列表</h1>
        <h2 style="text-align: center;color: gray;">
            Last_time:{{userInfo.last_login_date | dealDate
            'YYYY-MM-DD '}}</h2>
        <div class="box">
            <table align="center" width="1050px" border="1px" rules="all" class="layui-table">
                <tr class="tr">
                    <td class="tdo">序号</td>
                    <td class="tdo">作者</td>
                    <td class="tdo">标题</td>
                    <td class="tdo">内容</td>
                    <td class="tdo">分类</td>
                    <td class="tdo">图片</td>
                    <td class="tdo">链接</td>
                    <td class="tdo">状态</td>
                    <td class="tdo">添加时间</td>
                    <td class="tdo">操作</td>
                </tr>
                {{each articles item index}}
                <tr>
                    <td>{{index + 1}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.article}}</td>
                    <td>{{item.content}}</td>
                    <td>{{item.cate_name}}</td>
                    <td><img src="/{{item.img}}" alt="" width="100px"></td>
                    <td><a href="#"
                            class="layui-btn layui-btn-primary layui-border-blue layui-btn layui-btn-sm">查看详情</a></td>
                    <!-- <td>{{item.content}}</td> -->

                    <!-- <td>{{item.author}}</td> -->

                    <td>
                        {{if item.Audit_status == 0}}
                        <span class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-sm">待审核</span>
                        {{else if item.Audit_status == 1}}
                        <span class="layui-btn layui-btn-primary layui-border-green layui-btn layui-btn-sm">审核通过</span>
                        {{else}}
                        <span class="layui-btn layui-btn-primary layui-border-red layui-btn layui-btn-sm">审核失败</span>
                        {{/if}}
                        <!-- {{@ item.Audit_status_text}} -->
                    </td>
                    <td>{{item.addtime | dateFormat 'YYYY-MM-DD'}}</td>
                    <td>
                        <a href="/edit?id={{item.id}}"
                            class="layui-btn layui-btn-primary layui-border-green layui-btn layui-btn-sm">编辑</a>
                        <!-- <a href="javascript:;" onclick="confirmDelete('{{item.id}}','{{item.img}}');">永久删除</a> -->
                        <a href="javascript:viid(0)" onclick="ajaxDelete('{{item.id}}','{{item.img}}')"
                            class="layui-btn layui-btn-primary layui-border-orange layui-btn layui-btn-sm">删除</a>
                        <a href="/recycle?id={{item.id}}"
                            class="layui-btn layui-btn-primary layui-border-red layui-btn layui-btn-sm">加入回收站</a>
                    </td>
                </tr>
                {{/each}}
            </table>
        </div>
    </div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script>

    $("table tr:odd").css('background-color', '#ccc')

    document.getElementById('addBtn').onclick = function () {
        location.href = '/add'
    }

    // 退出
    function logout() {
        if (confirm('确认退出吗')) {
            location.href = "/logout"
        }
    }

    // 普通删除
    function confirmDelete(id, img) {

        layer.confirm('确认永久删除吗，数据不可还原', {
            btn: ['是的', '取消'], //按钮
            shadeClose: true,
            shade: [0.3, '#000']
        }, () => {
            //点了是的按钮触发
            location.href = "/delete?id=" + id + "&img=" + img
        }, () => {
            layer.msg('你取消')
        });


    }

    // ajax异步删除
    function ajaxDelete(ele, id, img) {

        layer.confirm('确认删除吗', {
            btn: ['是的', '取消'], //按钮
            shadeClose: true,
            shade: [0.3, '#000']
        }, () => {
            //点了是的按钮触发
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    let data = JSON.parse(this.responseText);
                    let { code, message } = data;
                    if (code === 20000) {
                        // 删除成功,删除当前tr行
                        $(ele).parents('tr').remove()
                        setTimeout(function () {
                            layer.msg('删除成功', { icon: 1 })
                        }, 500)

                        layer.closeAll();
                    } else if (code === 30004) {
                        layer.msg(message)
                        location.href = "/login"
                    } else {
                        layer.msg('删除失败')
                    }
                }
            }
            xhr.open('post', '/ajaxdelete', true)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xhr.send("id=" + id + "&img=" + img + "&flag=ajax")

        }, () => {
            layer.msg('否的')
        });
    }


    // ajax 更新用户头像
    let avatarFile = document.getElementById("avatarFile")
    let preview = document.getElementById('preview')
    document.getElementById("updAvatar").onclick = function () {
        // 执行input文件框单击事件
        avatarFile.click();
    }

    // 给文件绑定onchange事件，来判断用户是否上传了文件
    avatarFile.onchange = function () {
        let file = this.files[0]; // 获取文件的二进制数据
        if (!file) {
            return;
        }
        let formData = new FormData();
        formData.append('avatar', file);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let data = JSON.parse(this.responseText)
                let { message, code, src } = data
                layer.msg(message)
                // 把服务器返回的图片路径设置img的src中，实现图片预览
                preview.src = '/' + src;
            }
        }
        xhr.open('post', '/uploadAvatar', true)
        xhr.send(formData)
    }


</script>

</html>